<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/xqhupingjia.css">
    <link  rel="stylesheet"  href="css/head.css">
</head>
<body>

<div  class="head"></div>
<div  id="hucontain">
    <div  class="main">
        <div  class="yi">
            <img  :src="shijuans[0]"  />
            <div><div>{{mypingjia.title}}</div><div>{{mypingjia.date}}</div></div>
            <div>共{{shijuans.length}}页</div>
        </div>

        <div   class="er">
         <img   :src="huihua"   />
           <span>共{{mypingjia.pingjiad.length}}评论</span>
        </div>

        <div  v-for="item  in  mypingjia.pingjiad"  class="san" >
             <div>
                 <div><img  :src="item.teachersrc" /></div>
                 <div>
                     <span>{{item.name}}</span>
                     <span>{{item.pdate}}</span>
                 </div>
             </div>
            <div>
                {{item.pingjia}}
            </div>
            <div>
                <div  v-for="items  in  item.huifu"><div>{{items.huifunam}}:</div><div>{{items.neirong}}</div></div>
            </div>
             <div>  <input placeholder="回复：说点什么吧"  /><div>发送</div></div>
        </div>

    </div>


</div>



<div  class="dibussss"></div>
</body>
<script  src="js/jquery.3.3.1.min.js"></script>
<script src="js/swiper.min.js"></script>
<script  src="js/vue.js"></script>
<script  type="text/javascript">




    $(document).ready(function () {
        $(".head").load("xqhead.html")
        $(".dibussss").load("dibu.html")
    })




    new Vue({
        el:"#hucontain",
        data: {
            stat:false,
            huihua:"http://bzt.cybwnt.com/uploads/zhongxue/huihuas.png",
            shijuans:["http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png"],
            mypingjia:{
                title:"四年级语文期中考试卷精选",date:"2017-02-13",pingjiad:[
                    {teachersrc:"http://bzt.cybwnt.com/uploads/zhongxue/webteacher.png",name:"张老师",pdate:"2017-06-13",pingjia:"你的基础比较薄弱，特别是第二章没有理解清楚，需要课后多加练习，希望你能继续坚持下去！每天做半个小时的练习题，一定会有收获的！加油吧！",huifu:[{huifunam:"陈雪",neirong:"谢谢老师的指导"},{huifunam:"程老师",neirong:"不用谢"},]},
                    {teachersrc:"http://bzt.cybwnt.com/uploads/zhongxue/webteacher.png",name:"张老师",pdate:"2017-06-13",pingjia:"你的基础比较薄弱，特别是第二章没有理解清楚，需要课后多加练习，希望你能继续坚持下去！每天做半个小时的练习题，一定会有收获的！加油吧！",huifu:[{huifunam:"陈雪",neirong:"谢谢老师的指导"},{huifunam:"程老师",neirong:"不用谢"},]},
                ]

            }
        },
        methods:{
            fangda:function ($event) {
                this.stat=true;
                // console.log(this.zuoye.src[$event.target.getAttribute("index")] )
                this.imgs= this.zuoye.srcc[$event.target.getAttribute("index")]   ;
            },

            getQueryVariable:function(variable){
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){
                        return pair[1];
                    }
                }
                return(false);
            },

            suoxiao:function () {

                this.stat=false;

            }

        },

        created:function () {
            var id=this.getQueryVariable('id');
        }

    })


</script>
</html>